<template>
  <div class="search-song-list">
    <song-list :songList="currentSongList" path="song-sheet-detail"></song-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, onMounted, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import SongList from "@/components/SongList.vue";
import { HttpManager } from "@/api";
import { ResponseBody } from "@/types";

export default defineComponent({
  components: {
    SongList,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const route = useRoute();

    const currentSongList = ref([]); // 存放的歌单
    const searchWord = computed(() => store.getters.searchWord);
    watch(searchWord, (value) => {
      getSearchList(value);
    });

    // 搜索歌单
    async function getSearchList(value) {
      if (!value) return;
      const result = (await HttpManager.getSongListOfLikeTitle(value)) as ResponseBody;
      if (!result.data.length) {
        (proxy as any).$message({
          message: "暂无该歌曲内容",
          type: "warning",
        });
      } else {
        currentSongList.value = result.data;
      }
    }

    onMounted(() => {
      getSearchList(route.query.keywords as string);
    });

    return {
      currentSongList,
    };
  },
});
</script>
